<!--
    简单的临时表格方案，需传入model与data数据
    只负责数据显示
-->
<template>
    <div class="table-wrapper">
        <table class="table">
            <thead>
                <slot name="thead">
                    <tr>
                        <th v-for="col in tableModel.fields" :key="col.code" v-if="col.listpos!==false">
                            {{col.name}}
                        </th>
                        <th>
                        </th>
                    </tr>
                </slot>
            </thead>
            <tbody>
                <tr v-if="!tableData || !tableData.length">
                    <td colspan="999" class="text-nodata">
                        暂无数据
                    </td>
                </tr>
                <template v-else v-for="(groupData,groupIndex) in tableData">
                    <tr>
                        <td class="group-header" colspan="999">
                            <slot name="groupHeader" :index="groupIndex">
                            </slot>
                        </td>
                    </tr>
                    <tr v-for="(row,index) in groupData" :key="index">
                        <td class="text-right" v-for="col in tableModel.fields" :key="col.code" v-if="col.listpos!==false">
                            <div class="field" v-html="row[col.code]"></div>
                        </td>
                        <slot name="extColumn" :row="row">
                        </slot>
                    </tr>
                </template>
            </tbody>
            <tfoot v-if="false">
                <slot name="tfoot">
                    <th></th>
                </slot>
            </tfoot>
        </table>
    </div>
</template>

<script>
import $ from '@/common'
import Field from 'field/type'
export default {
    name: 'groupTable',
    props: {
        model: {},
        data: {
            default: () => []
        }
    },
    data() {
        return {
            checkAll: false,
            tableModel: {},
            groupShow: {},
            tableData: [],
            checkList: [],
            fieldList: []
        }
    },
    watch: {
        data() {
            this.$set(this, 'tableData', this.data)
            this.$set(this, 'checkList', [])
        },
        tableModel() {
            this.dataRender = {}
            this.fieldList = $.propMap(this.tableModel.fields, 'code')
            for (let i in this.tableModel.fields) {
                let field = this.tableModel.fields[i]
                if (Field[field.type] && Field[field.type].render) {
                    this.dataRender[field.code] = Field[field.type].render(field)
                }
            }
        }
    },
    created() {
        if (this.model) {
            this.$set(this, 'tableModel', this.model)
            if (this.data) {
                this.$set(this, 'tableData', this.data)
            }
        } else {
            if (this.data) {
                for (let i in this.data) {
                    if (this.data[i]) {
                        for (let j in this.data[i]) {
                            var row = this.data[i][j]
                            var tempModel = { fields: [] }
                            for (let i in row) {
                                tempModel.fields.push({
                                    code: i,
                                    name: i
                                })
                            }
                            this.$set(this, 'tableModel', tempModel)
                            this.$set(this, 'tableData', this.data)
                            return
                        }
                    }
                }
            }
        }
    },
    methods: {
    }
}
</script>

<style lang="less">
.table tbody tr td.group-header {
    background-color: #f8f8f9;
}
</style>
